﻿<h1>Observable TreeView Example</h1>
This example explains how to take advantage of knockout.js observable array.<br>There is no hard dependency on knockout.js, but if it is used, RedUI will take advantage of it's power.<br>
<button id="ObservableTreeViewExample" class="try-example-button">Try Example</button>
<h2>UI Model</h2>
<div style="color:Black;background-color:White;"><pre>{
    <span style="color:#A31515;">"windows"</span>: [
        {
            <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"ObservableTreeViewExample"</span>,
            <span style="color:#A31515;">"title"</span>: <span style="color:#A31515;">"Observable With TreeView Example"</span>,
            <span style="color:#A31515;">"left"</span>: 500,
            <span style="color:#A31515;">"top"</span>: 100,
            <span style="color:#A31515;">"width"</span>: 500,
            <span style="color:#A31515;">"height"</span>: 400,
            <span style="color:#A31515;">"controls"</span>: [
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"myRibbon"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"ribbon"</span>,
                    <span style="color:#A31515;">"controls"</span>: [
                        {
                            <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"addNewRibbonButton"</span>,
                            <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"ribbonbutton"</span>,
                            <span style="color:#A31515;">"text"</span>: <span style="color:#A31515;">"Add New Subnode"</span>,
                            <span style="color:#A31515;">"iconSource"</span>: <span style="color:#A31515;">"/examples/resources/addnew.png"</span>
                        }
                    ]
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"managersTree"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"treeview"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"items"</span>,
                    <span style="color:#A31515;">"nodeModel"</span>: {
                        <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"managersTreeNode"</span>,
                        <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"treeviewnode"</span>,
                        <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"items"</span>,
                        <span style="color:#A31515;">"controls"</span>: [
                            {
                                <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"nodeIcon"</span>,
                                <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"image"</span>,
                                <span style="color:#A31515;">"alternateText"</span>: <span style="color:#A31515;">"Icon"</span>,
                                <span style="color:#A31515;">"width"</span>: 16,
                                <span style="color:#A31515;">"height"</span>: 16,
                                <span style="color:#A31515;">"source"</span>: <span style="color:#A31515;">"/examples/resources/user-admin.png"</span>
                            },
                            {
                                <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"titleStaticText"</span>,
                                <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"statictext"</span>,
                                <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"title"</span>
                            },
                            {
                                <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"nameStaticText"</span>,
                                <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"statictext"</span>,
                                <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"name"</span>
                            }
                        ]
                    }
                }
            ]
        }
    ]
}
</pre></div>
<h2>Data Model</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> subnodes = ko.observableArray([
	{
		title: <span style="color:#A31515;">"Manager"</span>,
		name: <span style="color:#A31515;">"Fiorello Lombardi"</span>,
		items: []
	},
	{
		title: <span style="color:#A31515;">"Goalkeeping Coach"</span>,
		name: <span style="color:#A31515;">"Armando Arcuri"</span>,
		items: []
	}
]);

<span style="color:Blue;">var</span> corporateManagement = {
	items: ko.observableArray([
		{
			title: <span style="color:#A31515;">"Team Manager"</span>,
			name: <span style="color:#A31515;">"Giulio Bellucci"</span>,
			items: subnodes
		}
	])
};
</pre></div>
<h2>Code</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> exampleWindow = redui.createNewWindow(<span style="color:#A31515;">"ObservableTreeViewExample"</span>);
exampleWindow.bind(corporateManagement);
exampleWindow.show();

<span style="color:Blue;">var</span> counter = 1;
exampleWindow.myRibbon.addNewRibbonButton.getElement().click(<span style="color:Blue;">function</span> () {
	<span style="color:Blue;">var</span> newItem = {
		title: <span style="color:#A31515;">"title"</span> + counter.toString(),
		name: <span style="color:#A31515;">"name"</span> + counter.toString(),
		items: []
	};

	subnodes.push(newItem);
	counter++;
});
</pre></div><br><br>